<template>
  <div class="baseList">
      <div class="tableBoxs">

        <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
        </div>

        <!--  表格  -->
        <!-- tableData表格数据是由父传子传递过来的！！！ -->
        <t-table
          row-key="index"
          :data="tableData"
          :columns="COLUMNS"
          :stripe="stripe"
          :bordered="bordered"
          :hover="hover"
          :table-layout="tableLayout ? 'auto' : 'fixed'"
          :size="size"
          :show-header="showHeader"
          cell-empty-content="-"
          resizable
          lazy-load
        >

          <!-- 图片预览及展示 -->
          <template #image="{ row }">
              <div class="tdesign-demo-image-viewer__base">
                  <t-image-viewer :images="[row.image]">
                      <template #trigger="{ open }">
                          <div class="tdesign-demo-image-viewer__ui-image">
                              <img
                                  alt="test"
                                  :src="row.image"
                                  class="tdesign-demo-image-viewer__ui-image--img"
                                  />
                              <div
                                  class="tdesign-demo-image-viewer__ui-image--hover"
                                  @click="open"
                                  >
                                  <span><BrowseIcon size="1.4em" /> 预览</span>
                              </div>
                          </div>
                      </template>
                  </t-image-viewer>
              </div>
          </template>

          <!-- 价格处理 -->
            <template #price="{ row }">
            {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
          </template>

          <!-- 操作按钮 -->
            <template #op="{ row }">
            <div class="operateCon">
              <a class="btn-dl" :class="row.count > 0 ? 'disabled' : ''" @click="handleDelete(row)">删除</a>
              <a class="font-bt" :class="row.count > 0 ? 'disabled' : ''"  @click="handleEdit(row)">编辑</a>
              <a class="delete" :class="row.count > 0 && row.status === 1 ? 'disabled btn-dl' : row.status === 1 ? 'btn-dl' : 'font-bt'"  @click="handleDisable(row)">禁用</a>
            </div>
            </template>
        </t-table>

        <!-- 分页 -->
         <!-- total pagination 表格数据是由父传子传递过来的！！！  -->
        <t-pagination
          v-if="total > 10"
          v-model="pagination.pageNum"
          v-model:pageSize="pagination.pageSize"
          :total="total"
          @change="onPageChange"
        />
      </div>
    </div>
</template>


<script setup lang="ts">
  import { ref } from 'vue';
  import { COLUMNS } from '../constants';
  import { TableProps } from 'tdesign-vue-next';

  const stripe = ref(true);
  const bordered = ref(true);
  const hover = ref(false);
  const tableLayout = ref(false);
  const size = ref<TableProps['size']>('medium');
  const showHeader = ref(true);

  /* 父传子 */
  let prop =   defineProps({
    tableData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 总条数
    total: {
      type: Number,
      default: 0
    },
    pagination: {
      type: Object,
      default: () => {
        return {}
      }
    }
	});

  //子传父
  let emit = defineEmits(["givePagination","handleBulid","handleEdit","handleDelete","handleDisable"]);
  const onPageChange = (pageInfo) => {
    console.log(pageInfo);
    emit('givePagination', pageInfo);
  };

  //在js代码中添加isDecimals方法，判断当前字段是否包含了小数点
  const isDecimals = (val) => {
      if (String(val).indexOf('.') > -1) {
        return true
      }
      return false
  }

  const handleBulid = () => {
    debugger;
    emit('handleBulid');
  }
  const handleEdit = (row) => {
    debugger
    emit('handleEdit',row);
  }
  
  /* 删除 */
  const handleDelete = (row) => {
    debugger
    emit('handleDelete',row.id);
  }

  /* 禁用 */ 
  const handleDisable = (row) => {
    debugger
    emit('handleDisable',row);
  }


</script>